<template>
  <div class="tab-container">
    <!-- 顶部选项卡 -->
    <el-tabs v-model="activeTab" class="category-tabs">
      <el-tab-pane
        v-for="tab in tabs"
        :key="tab.name"
        :label="tab.label"
        :name="tab.name"
      >
        <!-- 选项卡内容区域 -->
        <div class="tab-content">
          <!-- 筛选条件区域 -->
          <div class="filter-section">
            <!-- 城市筛选 -->
            <div class="filter-group">
              <span class="filter-label">城市：</span>
              <el-radio-group v-model="selectedCity" size="small">
                <el-radio-button
                  v-for="city in cities"
                  :key="city.value"
                  :label="city.value"
                >
                  {{ city.label }}
                </el-radio-button>
              </el-radio-group>
            </div>

            <!-- 类型筛选 -->
            <div class="filter-group">
              <span class="filter-label">类型：</span>
              <el-radio-group v-model="selectedType" size="small">
                <el-radio-button
                  v-for="type in types"
                  :key="type.value"
                  :label="type.value"
                >
                  {{ type.label }}
                </el-radio-button>
              </el-radio-group>
            </div>

            <!-- 时间筛选 -->
            <div class="filter-group">
              <span class="filter-label">时间：</span>
              <el-radio-group v-model="selectedTime" size="small">
                <el-radio-button
                  v-for="time in times"
                  :key="time.value"
                  :label="time.value"
                >
                  {{ time.label }}
                </el-radio-button>
              </el-radio-group>
            </div>
          </div>

          <!-- 内容列表区域（实际内容根据业务需求填充） -->
          <div class="content-list">
              <Coursel/>
            <slot :name="activeTab"></slot>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Coursel from '../components/Coursel.vue';
// 当前激活的选项卡
const activeTab = ref('performance');

// 选项卡数据
const tabs = ref([
  { label: '漫展演出', name: 'performance' },
  { label: 'B站周边', name: 'peripheral' },

]);

// 筛选条件数据
const selectedCity = ref('all');
const cities = ref([
  { label: '全国', value: 'all' },
  { label: '上海', value: 'shanghai' },
  { label: '深圳', value: 'shenzhen' },
  { label: '北京', value: 'beijing' },
  { label: '广州', value: 'guangzhou' },
  { label: '天津', value: 'tianjin' },
  { label: '成都', value: 'chengdu' },
  { label: '杭州', value: 'hangzhou' },
  { label: '沈阳', value: 'shenyang' },
  { label: '重庆', value: 'chongqing' },
  { label: '廊坊市', value: 'langfang' }
]);

const selectedType = ref('all');
const types = ref([
  { label: '全部类型', value: 'all' },
  { label: '演出', value: 'show' },
  { label: '展览', value: 'exhibition' },
  { label: '本地生活', value: 'local' }
]);

const selectedTime = ref('all');
const times = ref([
  { label: '全部时间', value: 'all' },
  { label: '本周', value: 'week' },
  { label: '本月', value: 'month' }
]);
</script>

<style lang="scss" scoped>
.tab-container {
  width: 100%;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin: 0 auto;

  // 选项卡样式
  .category-tabs {
    :deep(.el-tabs__header) {
      margin: 0;
      background-color: #f5f7fa;
      border-radius: 4px 4px 0 0;

      .el-tabs__nav-wrap {
        display: flex;
        justify-content: center;
        padding: 0 !important;

        &::after {
          height: 1px;
          background-color: #e4e7ed;
        }

        .el-tabs__nav {
          float: none;
          display: inline-flex;
        }
      }

      .el-tabs__item {
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        color: #606266;
        padding: 0 30px; // 增加左右padding

        &:hover {
          color: #f25d8e;
        }

        &.is-active {
          color: #f25d8e;
          font-weight: bold;
        }
      }

      .el-tabs__active-bar {
        background-color: #f25d8e;
        height: 3px;
      }
    }

    :deep(.el-tabs__content) {
      padding: 20px;
    }
  }


}
</style>
